<!DOCTYPE html>
<html>

	<head>
		<title>Draw and modify features example</title>
		<script src="js/jquery.js"></script>
		<link rel="stylesheet" href="css/bootstrap.css">
		<script src="js/bootstrap.js"></script>
		<link rel="stylesheet" href="css/ol.css" type="text/css">
		<script src="js/ol-debug.js"></script>

	</head>

	<body>
		<div class="container-fluid">

			<div class="row-fluid">
				<div class="span12">
					<div id="map" class="map"></div>
				</div>
				<form class="form-inline">
					<label>Geometry type &nbsp;</label>
					<select id="type">
						<option value="Point">Point</option>
						<option value="LineString">LineString</option>
						<option value="Polygon">Polygon</option>
					</select>
				</form>
			</div>

		</div>
		<script>
			var raster = new ol.layer.Tile({
				source: new ol.source.MapQuest({
					layer: 'sat'
				})
			});
			var map = new ol.Map({
				layers: [raster],
				target: 'map',
				view: new ol.View({
					center: [-11000000, 4600000],
					zoom: 4
				})
			});
			var features = new ol.Collection();
			var featureOverlay = new ol.layer.Vector({
				source: new ol.source.Vector({
					features: features
				}),
				style: new ol.style.Style({
					fill: new ol.style.Fill({
						color: 'rgba(255, 255, 255, 0.2)'
					}),
					stroke: new ol.style.Stroke({
						color: '#ffcc33',
						width: 2
					}),
					image: new ol.style.Circle({
						radius: 7,
						fill: new ol.style.Fill({
							color: '#ffcc33'
						})
					})
				})
			});
			featureOverlay.setMap(map);
			var modify = new ol.interaction.Modify({
				features: features,
				// the SHIFT key must be pressed to delete vertices, so
				// that new vertices can be drawn at the same position
				// of existing vertices
				/*deleteCondition: function(event) {
					return ol.events.condition.shiftKeyOnly(event) &&
						ol.events.condition.singleClick(event);
				}*/
			});
			map.addInteraction(modify);
			var draw; // global so we can remove it later
			function addInteraction() {
				draw = new ol.interaction.Draw({
					features: features,
					type: /** @type {ol.geom.GeometryType} */ (typeSelect.value),
					pixelTolerance:20,
					clickTolerance:50
				});
				map.addInteraction(draw);
			}
			var typeSelect = document.getElementById('type');
			/**
			 * Let user change the geometry type.
			 * @param {Event} e Change event.
			 */
			typeSelect.onchange = function(e) {
				map.removeInteraction(draw);
				addInteraction();
			};
			addInteraction();
		</script>
	</body>

</html>